<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Map Theme</title>

    <link rel="stylesheet" href="css/demo-center.css" />

    <style>
        html,
        body {
            background-color: #efefef;
            position: absolute;
            padding: 10px;
        }

        #container {
            position: absolute;
            padding: 10px;
            height: 644px;
            width: 428px;
            left: 10px;
            top: 10px;
            border-radius: 6px;
        }

        #map-styles .input-item {
            height: 2rem;
        }

        #map-styles .input-item span {
            display: inline-block;
            width: 4rem;
        }

        #map-styles .input-item .input-text {
            color: #0288d1;
            margin-left: 1rem;
            margin-right: 0rem;
            width: 6rem;
        }

        #map-features .input-item {
            height: 2rem;
        }
    </style>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
    <div id="container"></div>
    <div id="interface" class="input-card"
        style="right: 250px;width: 400px;height: 600px; background-color: aliceblue;font-size: large;">
        <table>
            <tr>
                <td>
                    <label>Shoot:</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Cut" style="width: 60px;" />
                </td>
            </tr>
        </table>
    </div>
    <div class="input-card" style="width:16rem;font-size: normal;">
        <h4>Preorganized themes</h4>
        <div id="map-styles">
            <select id="map-theme" name="map-theme" onchange="switchTheme(this.value)">
                <option value="normal">Normal</option>
                <option value="dark">Dark</option>
                <option value="light">Light</option>
                <option value="whitesmoke">White Smoke</option>
                <option value="fresh">Fresh</option>
                <option value="grey">Grey</option>
                <option value="graffiti">Graffiti</option>
                <option value="macaron">Macaron</option>
                <option value="blue">Blue</option>
                <option value="wine">Wine</option>
            </select>
            <h4>Features</h4>
            <div id="map-features">
                <div class="input-item" style="width:19rem">
                    <input type='checkbox' name='mapStyle' value='bg' checked>
                    <span class="input-text">Background</span>
                </div>
                <div class="input-item" style="width:19rem">
                    <input type='checkbox' name='mapStyle' value='road' checked>
                    <span class="input-text">Road</span>
                </div>
                <div class="input-item" style="width:19rem">
                    <input type='checkbox' name='mapStyle' value='building' checked>
                    <span class="input-text">Buildings</span>
                </div>
                <div class="input-item" style="width:19rem">
                    <input type='checkbox' name='mapStyle' value='point' checked>
                    <span class="input-text">Mark</span>
                </div>
            </div>
            <h4>Capacity</h4>
            <div id="layer-capacity">
                <label>satellite</label><input id="opacity" type="range" value="0.6" min="0" max="1" step="0.01"
                    oninput="setSatelliteOpacity(this.value)" onchange="setSatelliteOpacity(this.value)">
                <label>roadnet</label><input id="roadnetOpacity" type="range" value="1.0" max="1" step="0.01"
                    oninput="setRoadnetOpacity(this.value)" onchange="setRoadnetOpacity(this.value)">
            </div>
            <label>Select PhoneType</label>
            <select id='phoneetype' name='phoneetype' onchange='switchResolution(this.value)'>
                <option value="1344x2772">Huawei Mate40 Pro (Pro+,RS)</option>
                <option value="1080x2376">Huawei Mate40</option>
                <option value="1200x2640">Huawei P40 Pro</option>
                <option value="1080x2340">Huawei P40</option>
                <option value="480x854">Android One</option>
                <option value="1284x2778">iPhone13 Pro Max</option>
                <option value="1170x2532">iPhone13 (Pro)</option>
                <option value="1080x2340">iPhone13 mini</option>
                <option value="1284x2778">iPhone12 Pro Max</option>
                <option value="1170x2532">iPhone12 (Pro)</option>
                <option value="1080x2340">iPhone12 mini</option>
                <option value="750x1334">iPhone SE 2</option>
                <option value="1125x2436">iPhone 11 Pro</option>
                <option value="1242x2688">iPhone 11 Pro Max</option>
                <option value="828x1792">iPhone 11 (XR)</option>
                <option value="1242x2688">iPhone XS Max</option>
                <option value="1125x2436">iPhone X,XS</option>
                <option value="1242x2208">iPhone (8+,7+,6S+,6+)</option>
                <option value="750x1334">iPhone (8,7,6S,6)</option>
                <option value="1080x2160">Google Pixel 3</option>
                <option value="1440x3200">Samsung Galaxy S21 Ultra</option>
                <option value="1080x2400">Samsung Galaxy S21+</option>
            </select>
        </div>

        <script
            src="https://webapi.amap.com/maps?v=1.4.15&key=58bc2d5e2ef98f5b3296cc313643bb9c&&plugin=AMap.ToolBar,AMap.Scale,AMap.Map3D,AMap.Autocomplete,AMap.PlaceSearch"></script>
        <script>
            var defaultLayerOpacity = 1.0;
            var defaultTileLayer = new AMap.TileLayer({
                opacity: defaultLayerOpacity
            });//Default Map Layer
            var roadNetLayerOacity = 1.0;
            var roadNetLayer = new AMap.TileLayer.RoadNet({//Roadnet Layer (Default: invisible)v
                opacity: roadNetLayerOacity
            });
            var buildingsLayerOpacity = 1.0;
            var buildingsLayer = new AMap.Buildings({//Buildings Layer (Bottom)
                zooms: [14, 18],
                zInsex: 10,
                heightFactor: 2,
                opacity: buildingsLayerOpacity
            })
            var satelliteLayerOpacity = 0.6;
            var satelliteLayer = new AMap.TileLayer.Satellite({//Satellite Layer
                map: map,
                opacity: satelliteLayerOpacity
            })
            //初始化地图
            var map = new AMap.Map('container', {
                //features:['bg','road','point'],
                layers: [
                    //upper is down.
                    defaultTileLayer,
                    satelliteLayer,
                    roadNetLayer,
                    // 楼块图层
                    buildingsLayer
                ],
                resizeEnable: true, //是否监控地图容器尺寸变化
                mapStyle: "amap://styles/normal",
                zoom: 10,
                viewMode: '3D',
                pitch: 60,
                //terrain: true
            });
            var scale = new AMap.Scale({
                visible: true
            });
            map.addControl(scale);

            //combo box
            function switchTheme(token) {
                var styleName = "amap://styles/" + token;
                map.setMapStyle(styleName);
            }

            //绑定radio点击事件
            var radios = document.querySelectorAll("#map-styles input");
            radios.forEach(function (ratio) {
                ratio.onclick = setMapStyle;
            });

            function setMapStyle() {
                var styleName = "amap://styles/" + this.value;
                map.setMapStyle(styleName);
            }

            //设置地图显示要素
            function setMapFeatures() {
                var features = [];
                var inputs = document.querySelectorAll("#map-features input");
                inputs.forEach(function (input) {
                    if (input.checked) {
                        features.push(input.value);
                    }
                });
                map.setFeatures(features);
            }

            //绑定checkbox点击事件
            var inputs = document.querySelectorAll("#map-features input");
            inputs.forEach(function (checkbox) {
                checkbox.onclick = setMapFeatures;
            });
            //Opacity
            function setSatelliteOpacity(val) {
                satelliteLayer.setOpacity(val);
            }
            function setRoadnetOpacity(val) {
                roadNetLayer.setOpacity(val);
            }

            //选择手机型号
            function switchResolution(pt) {
                var aMap = document.getElementById('container');
                var inter = document.getElementById('interface');
                if (pt == '1344x2772') {
                    aMap.style['height'] = '924px';
                    aMap.style['width'] = '448px';
                    inter.style['left'] = '458px';
                }
                else if (pt == "1080x2376") {
                    aMap.style['height'] = '792px';
                    aMap.style['width'] = '360px';
                    inter.style['left'] = '370px';
                }
                else if (pt == '1284x2778') {
                    aMap.style['height'] = '926px';
                    aMap.style['width'] = '428px';
                }
                else if (pt == '1170x2532') {
                    aMap.style['height'] = '844px';
                    aMap.style['width'] = '390px';
                }
                else if (pt == '1080x2340') {
                    aMap.style['height'] = '780px';
                    aMap.style['width'] = '360px';
                } else if (pt == '1200x2640') {
                    aMap.style['height'] = '880px';
                    aMap.style['width]'] = '400px';
                } else if (pt == '480x854') {
                    aMap.style['height'] = '569px';
                    aMap.style['width'] = '480px';
                } else if (pt == '1080x2160') {
                    aMap.style['height'] = '720px';
                    aMap.style['width'] = '360px';
                } else if (pt == '1440x3200') {
                    aMap.style['height'] = '1067px';
                    aMap.style['width'] = '480px';
                } else if (pt == '1080x2400') {
                    aMap.style['height'] = '800px';
                    aMap.style['width'] = '360px';
                }
                ;
                map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/dark-v10',
                    center: [-79.4512, 43.6568],
                    zoom: 13
                });
            };

        </script>
</body>

</html>